<template>
  <div style="height: auto; overflow:auto;">
    <div>
      <!-- <h1>{{this.ItMusicId}}</h1> -->

      <van-row>
        <van-col span="6">
             <van-image
              width="80"
              height="80"
              round="cover"
              :src="this.TbMusic.musicIcon"
            />
        </van-col>
        <van-col span="15">
          <div  style="align-items: center; justify-content: flex-start; "> 
       
            <!-- <van-image
              width="70"
              height="70"
              round="cover"
              :src="this.TbMusic.musicIcon"
            /> -->

            <!-- <h3>歌名:{{this.TbMusic.musicName}}  </h3>
            <h4>作者：{{this.TbMusic.musicAuthor}}</h4> -->
               <p class="name">{{this.TbMusic.musicName}}  </p>
               <p class="author">歌手：{{this.TbMusic.musicAuthor}}</p>
            
          </div>
        </van-col>
        <van-col span="3">
          <van-icon  size="2rem" @click="playIt()"  name="http://rul4y8e5f.hn-bkt.clouddn.com/24gf-playCircle.png" ></van-icon>
        </van-col>
      </van-row>

      <van-cell  >
        
        <!-- <div style="display:flex; align-items: center; justify-content: flex-start; "> 
       
        <van-image
          width="70"
          height="70"
          round="cover"
          :src="this.TbMusic.musicIcon"
        />
 
        <h3>歌名:{{this.TbMusic.musicName}}  </h3>
        ----<h4>作者：{{this.TbMusic.musicAuthor}}</h4>
        
      </div> -->

      <!-- 标签 -->
      <div>
         
          <van-tag v-for="item in labelList"
          :key="item.labelId"
          mark type="primary"  text-color="#ad0000" plain>{{item.labelName}}</van-tag>
       
    
        </div>

      <div>
        <p>描述：      </p>
        <p >{{this.TbMusic.musicDescription}}</p>
        <!-- <van-button round  >歌词</van-button> -->
        <!-- <p >{{this.TbMusic.songWord}}</p> -->
        <!-- <p>{{this.TbMusic.songWord}}</p> -->
        <!-- <label>{{this.TbMusic.songWord}}</label> -->
        <van-row>
          <van-col span="8"> 
            <van-button size="small" @click="addPlayList()" icon="http://rul4y8e5f.hn-bkt.clouddn.com/playlist1.png" round>加入播放列表</van-button>
          </van-col>
          <van-col span="8">
            <van-button  size="small" @click="lookItBlog()" round icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD.png">查看音乐故事</van-button>
          </van-col>
          <van-col span="8">
            <van-button round  size="small" @click="toUploadBlog()" icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%86%E4%BA%AB%20%283%29.png">分享音乐故事</van-button>
          </van-col>
        </van-row>
      
        <van-popup v-model="showUploadBlog" position="bottom" closeable :style="{ height: '60%' }" >
       <UploadBlog :ItMusicId="this.ItMusicId" :ItMusicName="this.TbMusic.musicName"></UploadBlog>
        </van-popup>
       


        <van-popup v-model="show" position="bottom" closeable :style="{ height: '20%' }" >
        <MusicComment :props_musicId="this.ItMusicId"></MusicComment>
        </van-popup>
        <div > 
          <van-row>
            <van-col span="8">
              <p class="ll1">点赞: <label class="ll2"> {{this.TbMusic.musicLike}}</label> </p> 
            </van-col>

            <van-col span="8">
              <p class="ll1">评论数：<label  class="ll2">{{this.TbMusic.countComment}}</label></p>
            </van-col>
            <van-col span="8">
              <p class="ll1">收藏数：<label class="ll2">{{this.TbMusic.countCollect}}</label></p>
            </van-col>
          </van-row>   
          </div>
        <div > 
          <van-row>
            <van-col span="8">
              
              <van-button v-if="this.TbMusic.isLike " size="small" round icon="http://rul4y8e5f.hn-bkt.clouddn.com/like.png" 
              @click="likeIt()"></van-button>

              <van-button v-if="!this.TbMusic.isLike" size="small" round icon="http://rul4y8e5f.hn-bkt.clouddn.com/like2no.png" 
              @click="likeIt()"></van-button>

            </van-col>
            <van-col span="8">
              <!-- <van-button round type="primary" size="small" @click="toComment()">评论</van-button> -->
              <van-icon size="2rem" @click="toComment()" name="http://rul4y8e5f.hn-bkt.clouddn.com/%E8%AF%84%E8%AE%BA.png"></van-icon>

            </van-col>
            <van-col span="8">
              <!-- <van-button type="primary" size="small" @click="collectIt()">收藏</van-button> -->
              <!-- http://rul4y8e5f.hn-bkt.clouddn.com/addcollect1.png -->
              <van-icon size="2rem" @click="collectIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/addcollect1.png"></van-icon>

             
              <van-popup
                v-model="collectShow"
                round
                position="bottom"
                :style="{ height: '45%' }"
              >
              
              <SelectCollect :ItMusicId="this.ItMusicId"></SelectCollect>
            </van-popup>
            </van-col>
          </van-row>
    
         
        </div>    
      </div>
      </van-cell>
    </div>
   <CommentList :ItMusicId="this.ItMusicId"></CommentList>
    
  </div>
</template>

<script>
import PlayListAPI from '@/api/PlayListAPI';
import CollectAPI from '@/api/CollectAPI';
import MusicAPI from '@/api/MusicAPI'
import MusicComment from '@/views/Music/info/comment/MusicComment.vue';
// import CommentPage2List from '@/views/Music/info/comment/CommentPage2List.vue';
import CommentList from './comment/CommentList.vue';
import SelectCollect from '@/views/User/collect/SelectCollect.vue';
import UploadBlog from '@/views/blog/uploadBlog.vue';

export default {
    name: "MusicAllInfo",
    components: { MusicComment ,
      // CommentPage2List,
      CommentList,
        SelectCollect,
        UploadBlog
    },
    data() {
        return {
            ItMusicId: "",
            show: false,
            showUploadBlog: false,
            collectShow: false,
            labelList:[],
            TbMusic: {
                musicId: "",
                musicName: "",
                musicAuthor: "",
                musicUploaderId: "",
                musicUrl: "",
                musicDescription: "",
                musicIcon: "",
                songWord: "",
                musicLike: "",
                countComment: "",
                countCollect: "",
                isLike:false,
            }
        };
    },
    created() {
  
      var Id1 = localStorage.getItem("musicId",this.ItMusicId)
     if(this.$route.params.id == null){
      this.ItMusicId=Id1
     }else{
      this.ItMusicId=this.$route.params.id
      localStorage.setItem("musicId",this.ItMusicId)
     }

    this.getMusicAllInfo(this.ItMusicId)

    this.getLabelListById(this.ItMusicId)
  
    },
    mounted() {
   
    },

    // 销毁前
    beforeDestroy(){

    },
    methods: {
      toUploadBlog(){

          this.showUploadBlog = true;
        // this.$router.push("uploadBlog")
      },
      getMusicAllInfo(Id){
             // 获取我的收藏夹列表
      var result = MusicAPI.GetAllInfo(Id)
        // 获取返回结果
       result.then((val) => {
        console.log(val);
        if (val.success) {
            // 将数据存到list里面
            this.TbMusic = val.data
            console.log(this.TbMusic)
        }
        else {
         console.log(val.errorMsg);
         this.$toast(val.errorMsg);
             }
      });
  
      },
      // 播放音乐故事
      playIt(){
      this.$bus.$emit("playUrl",this.TbMusic.musicUrl)
       },

      // 查看音乐故事
      lookItBlog(){
        this.$router.push({name: "music2BlogList",
          params:{
            id: this.ItMusicId
          }
    })
    // this.$router.go(0)
      },

      // 根据音乐id获取标签
      getLabelListById(mId){
        var result = MusicAPI.GetLabelByMusicId(mId)
        // 获取返回结果
       result.then((val) => {
        if (val.success) {
            // 将数据存到list里面
            this.labelList = val.data
            console.log(this.TbMusic)
        }
        else {
         console.log(val.errorMsg);
         this.$toast(val.errorMsg);
             }
      });
  
      },



        likeIt() {
            // this.$toast("点赞成功");
            var result = MusicAPI.LikeMyMusic(this.ItMusicId);
            // 获取返回结果
            result.then((val) => {
                console.log(val);
                if (val.success) {
                    // console.log("点赞成功！！！");
                    this.$toast(val.data);
                    this.orNoLike()
                    // this.$router.go(0)
                }
                else {
                    console.log(val.errorMsg);
                    this.$toast(val.errorMsg);
                }
            });
        },

        //是否点赞
        orNoLike(){
          var result = MusicAPI.OrNotLikeusic(this.ItMusicId)
            // 获取返回结果
            result.then((val) => {
                if (val.success) {
                  this.TbMusic.isLike = val.data
                    // this.$router.go(0)
                }
                else {
                    console.log(val.errorMsg);
                    this.$toast(val.errorMsg);
                }
            });
        },

        // 发布评论
        toComment() {
            this.$bus.$emit("musicId", this.ItMusicId);
            // this.$router.push('/musicComment')
            this.show = true;
        },
        
        // 添加到播放列表
        addPlayList() {
            var result = PlayListAPI.Add2PlayList(this.TbMusic);
            // 获取返回结果
            result.then((val) => {
                console.log(val);
                if (val.success) {
                    console.log("加入播放列表成功！！！");
                    //  刷新播放列表
                    this.$bus.$emit("refreshList", true);
                    this.$toast("加入播放列表成功");
                }
                else {
                    console.log(val.errorMsg);
                    this.$toast(val.errorMsg);
                }
            });
        },
        // 收藏夹
        collectIt() {
          this.collectShow= true;
            // this.$toast("收藏成功");
        }
    },

}
</script>

<style scoped>
 .ll1{
  color: #323e41;
 }
 .ll2{
  color: #3567d4;
 }

 .name{
  font-size: larger;
  font-style: oblique;
  text-align: center;
  color: #db599a;
 }

 .author{
  text-align: center;
  color: #0e8bd3;
 }
</style>